<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {

            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        img.desaturate {
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
        }

        .list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .item {
            height: 48px;
            line-height: 48px;
            border: 1px solid #ddd;
        }

        body:before {
            line-height: 1;
            content: "";
            position: fixed;
            top: -10px;
            left: 0;
            width: 100%;
            height: 10px;
            -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
            -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
            box-shadow: 0px 0px 10px rgba(0, 0, 0, .8);
            z-index: 100;
        }

        ul > li:not(:last-child)::after {
            content: ",";
        }

        .slider {
            height: 30px;
            background-color: red;
        }

        .slider ul {
            max-height: 0;
            overflow: hidden;
        }

        .slider:hover ul {
            max-height: 1000px;
            transition: .3s ease;
        }

        .test3 span {
            position: relative;
        }

        .test3 span a {
            position: relative;
            z-index: 2;
        }

        .test3 span a:hover, .test3 span a:active {
            z-index: 4;
        }

        .test3 span input {
            background: transparent;
            border: 0;
            cursor: pointer;
            position: absolute;
            top: -1px;
            left: 0;
            width: 101%; /* Hacky */
            height: 301%; /* Hacky */
            z-index: 3;
        }

        .test3 span input:focus {
            background: transparent;
            border: 0;
            z-index: 1;
        }

        .blur {
            color: transparent;
            text-shadow: 5px 0 5px red;
        }

        .blur:hover {
            color: #000;
            text-shadow: 5px 0 5px transparent;
        }
    </style>
</head>
<body>
<img src="cat1.jpg" alt="cat" class="desaturate">
<div class="test3">
  <span><input type="text" value=" " readonly="true"/>
  <a href="http://renpingjun.com">Double click me</a></span>
</div>
<p class="blur">阿斯蒂芬阿斯蒂芬阿斯蒂芬打算</p>
<div class="slider">
    <ul class="list">
        <li class="item">第一个</li>
        <li class="item">第一个</li>
        <li class="item">第一个</li>
        <li class="item">第一个</li>
        <li class="item">第一个</li>
        <li class="item">第一个</li>
        <li class="item">第一个</li>
        <li class="item">第一个</li>
        <li class="item">第一个</li>
    </ul>
</div>
</body>
</html>